<template>
  <div>
    <h1>【aty-transfer】 component demo</h1>
    <p>【aty-transfer】 本质</p>

    <aty-row class="fd-transfer-box">
      <aty-row>
        <aty-title level="4">1.【aty-transfer】基础 </aty-title>
        <aty-transfer :data="data1"
                      :target-keys="targetKeys1"
                      :render-format="render1"
                      @change="handleChange1" />
      </aty-row>

      <aty-row>
        <aty-title level="4">2.【aty-transfer】带搜索功能 filterable </aty-title>
        <aty-transfer :data="data2"
                      :target-keys="targetKeys2"
                      filterable
                      :filter-method="filterMethod"
                      @change="handleChange2" />
      </aty-row>

      <aty-row>
        <aty-title level="4">3.【aty-transfer】自定义 ,render-format  </aty-title>
        <aty-transfer :data="data3"
                      :target-keys="targetKeys3"
                      :list-style="listStyle"
                      :render-format="render3"
                      :operations="['向左移动','向右移动']"
                      filterable
                      @change="handleChange3">
          <aty-panel :style="{float: 'right', margin: '5px'}">
            <aty-button type="ghost" size="small" @click="reloadMockData">刷新</aty-button>
          </aty-panel>
        </aty-transfer>
      </aty-row>

      <aty-row>
        <aty-title level="4">3.【aty-transfer】自定义 不同slot </aty-title>
        <h4>slot: defult</h4>
        <p>使用default slot左右两边的transfer都会出现default的样式</p>
        <p>【注意】：如果同时使用了default和left/right，默认会使用default</p>
        <aty-transfer :data="data4"
                      :target-keys="targetKeys4"
                      :list-style="listStyle"
                      :render-format="render3"
                      :operations="['向左移动','向右移动']"
                      filterable
                      ref="trans"
                      @change="handleChange4">
          <aty-panel :style="{'display': 'flex', 'justify-content': 'space-between', 'margin': '5px'}">
            <aty-button type="success" size="small">一个按钮，功能自己写</aty-button>
          </aty-panel>
          <aty-button type="success" size="small" slot="left-footer">一个按钮，功能自己写</aty-button>
        </aty-transfer>
        <h4>slot: left-footer</h4>
        <p>使用left-footer</p>
        <aty-transfer :data="data4"
                      :target-keys="targetKeys4"
                      :list-style="listStyle"
                      :render-format="render3"
                      :operations="['向左移动','向右移动']"
                      filterable
                      ref="trans"
                      @change="handleChange4">
          <aty-panel slot="left-footer" :style="{'display': 'flex', 'justify-content': 'space-between', 'margin': '5px'}">
            <aty-button type="success" size="small" @click="addData">增加</aty-button>
            <aty-button type="error" size="small" @click="deleteData">删除</aty-button>
            <aty-button type="primary" size="small" @click="editData">修改</aty-button>
          </aty-panel>
        </aty-transfer>
        <h4>slot: right-footer</h4>
        <p>使用right-footer</p>
        <aty-transfer :data="data4"
                      :target-keys="targetKeys4"
                      :list-style="listStyle"
                      :render-format="render3"
                      :operations="['向左移动','向右移动']"
                      filterable
                      ref="trans"
                      @change="handleChange4">
          <aty-panel slot="right-footer" :style="{'display': 'flex', 'justify-content': 'space-between', 'margin': '5px'}">
            <aty-button type="success" size="small" >一个按钮，功能自己写</aty-button>
          </aty-panel>
        </aty-transfer>
      </aty-row>

    </aty-row>

  </div>
</template>
<script>
export default {
  data () {
    return {
      data1: this.getMockData(),
      targetKeys1: this.getTargetKeys(),
      data2: this.getMockData(),
      targetKeys2: this.getTargetKeys(),
      data3: this.getMockData(),
      targetKeys3: this.getTargetKeys(),
      data4: [],
      targetKeys4: [],
      listStyle: {
        width: '250px',
        height: '300px'
      }
    }
  },
  methods: {
    // 模拟数据
    getMockData () {
      const mockData = []
      for (let i = 1; i <= 20; i++) {
        mockData.push({
          code: i.toString(),
          codeType: i.toString() + 'category',
          name: '内容' + i,
          description: '内容' + i + '的描述信息',
          disabled: Math.random() * 3 < 1
        })
      }
      return mockData
    },
    addData () {
      const num = Math.floor(Math.random()*100)
      this.data4.push({
          code: 'zzzzzzzzzzzzzzzzzz' + num,
          codeType: 'zzzzzzzzzzzzzzzzzzzzzz',
          name: '鸭嘴兽' + num,
          description: '鸭嘴兽'
        })
    },
    deleteData () {
      const leftCheckKey = this.$refs.trans.leftCheckedKeys
      if (leftCheckKey.length > 0) {
        let _data = this.data4
        this.data4 = _data.map((one, index) => {
          // 过滤属于letfCheckkey的值
          if (leftCheckKey.indexOf(one.code) == -1) {
            return one
          }
        }).filter(one => !!one)
      }
    },
    editData () {
      const leftCheckKey = this.$refs.trans.leftCheckedKeys
      // 只能改一个
      if (leftCheckKey.length === 1) {
        this.data4.forEach((one) => {
          if (leftCheckKey.indexOf(one.code) > -1) {
            one.name = '改名字'
            one.description = '改描述'
          }
        })
      }
    },
    // 显示在右侧框数据的key集合
    getTargetKeys () {
      return this.getMockData().filter(() => Math.random() * 2 > 1).map(item => item.code)
    },
    // 渲染
    render1 (item) {
      return item.name
    },
    handleChange1 (newTargetKeys, direction, moveKeys) {
      console.log(newTargetKeys)
      console.log(direction)
      console.log(moveKeys)
      this.targetKeys1 = newTargetKeys
    },
    handleChange2 (newTargetKeys) {
      this.targetKeys2 = newTargetKeys
    },
    filterMethod (data, query) {
      return data.name.indexOf(query) > -1
    },
    handleChange3 (newTargetKeys) {
      this.targetKeys3 = newTargetKeys
    },
    handleChange4 (newTargetKeys) {
      this.targetKeys4 = newTargetKeys
    },
    render3 (item) {
      return item.name + ' - ' + item.description
    },
    reloadMockData () {
      this.data3 = this.getMockData()
      this.targetKeys3 = this.getTargetKeys()
    }
  },
  mounted () {
    this.data4 = this.getMockData()
    this.targetKeys4 = this.getTargetKeys()
  }
}
</script>
<style lang="less" type="text/less">
    .fd-transfer-box {
        margin: 0 20px;
        text-align:left;
        >.aty-row {
             padding-bottom: 10px;
         }
    }
</style>
